<template>
  <div class="city">
    <div class="hotcity" v-if="hotCitys">
      <div class="title">热门城市</div>
      <div
        class="item"
        v-for="value in hotCitys.cities"
        :key="value.cityId"
        @click="goHome(value)"
      >
        {{ value.name }}
      </div>
    </div>

    <div v-for="item in otherCitys" :key="item.prefix" class="items">
      <div class="title">{{ item.prefix }}</div>
      <div
        class="item"
        v-for="value in item.cities"
        :key="value.cityId"
        @click="goHome(value)"
      >
        {{ value.name }}
      </div>
    </div>
  </div>
</template>

<script>
// import { cityApi } from "@/utils/api";
import { mapMutations, mapGetters, mapActions } from "vuex";
export default {
  // data() {
  //   return {
  //     cityList: [],
  //   };
  // },
  computed: {
    // ...mapState(["cityList"]),
    // hotCitys() {
    //   return this.cityList[0];
    // },
    // otherCitys() {
    //   return this.cityList.slice(1);
    // },
    ...mapGetters("city", ["hotCitys", "otherCitys"]),
  },
  mounted() {
    // this.getData();
    this.getCityListAsync();
  },
  methods: {
    ...mapMutations("city", ["changeCity"]),
    ...mapActions("city", ["getCityListAsync"]),
    // async getData() {
    //   const res = await cityApi();
    //   // console.log(res);
    //   this.cityList = res.result;
    // },
    goHome(value) {
      // 后退一步
      this.$router.go(-1);
      // console.log(value);
      // this.$store.commit("changeCity", { name: value.name });

      // vuex的内容存在浏览器内存中的，刷新是会丢失的，借助于本地存储来做
      localStorage.setItem("city", value.name);
      localStorage.setItem("id", value.cityId);
      this.changeCity({ name: value.name, id: value.cityId });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  background-color: #ebebeb;
  font-size: 14px;
  color: #333;
  top: 0;
  bottom: 0;
  height: 25px;
  line-height: 25px;
  width: 100%;
  padding-left: 10px;
}

.hotcity {
  overflow: hidden;
}
.hotcity .item {
  float: left;
  background: #fff;
  width: 29%;
  height: 0.66rem;
  margin-top: 0.3rem;
  margin-left: 4%;
  padding: 0 0.08rem;
  border: 0.02rem solid #e6e6e6;
  border-radius: 0.06rem;
  line-height: 0.66rem;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.items .item {
  height: 0.88rem;
  line-height: 0.88rem;
  margin-left: 0.3rem;
  border-bottom: 0.02rem solid #c8c7cc;
}

// .items:first-child .item {
//   float: left;
//   background: #fff;
//   width: 29%;
//   height: 0.66rem;
//   margin-top: 0.3rem;
//   margin-left: 4%;
//   padding: 0 0.08rem;
//   border: 0.02rem solid #e6e6e6;
//   border-radius: 0.06rem;
//   line-height: 0.66rem;
//   text-align: center;
//   box-sizing: border-box;
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
// }
</style>
